<template>
	<van-nav-bar title="协议主体" />
	<div class="app">
		<van-cell-group inset>
			<van-field label="代理类别" required>
				    <template #button>
				      <os-radio style="margin-left: -230px;" :items="agreementTypes" v-model="formData.type"></os-radio>
				    </template>
			</van-field>
			<van-field required label="甲方" v-model="formData.jf" clearable placeholder="请选择甲方" @click="choice('jf')"
				is-link></van-field>
			<van-field required label="乙方" v-model="formData.yf" clearable placeholder="请选择乙方" @click="choice('yf')"
				is-link></van-field>
			<van-cell required title="开始时间" :value="startDate" @click="showDatepicker('startDate')" />
			<van-cell required title="结束时间" :value="endDate" @click="showDatepicker('endDate')" />
			<van-cell required v-if="formData.type=='终端代理'" value="请选择终端" title="终端" is-link @click="moreChoice('终端')" />
			<van-cell required v-else value="请选择地区" title="地区" is-link @click="scopeShow = true" />
			<!--根据选择的区域追加-->
			<van-cell v-for="(area,index) in formData.areas" :key="index"
				:title="(index+1)+':'+area.province+'-'+area.city+'-'+area.area" />
			<!--根据选择的终端追加-->
			<van-cell v-for="(zd,index) in formData.zds" :key="index"
				:title="(index+1)+':'+zd.province+'-'+zd.city+'-'+zd.area+'-'+zd.zdName" />
		</van-cell-group>
		<van-calendar :default-date="defaultDate" :show="dateShow" @confirm="onConfirm" />
		<!-- 圆角弹窗（居中） -->
		<van-popup :show="scopeShow" round style="width: 100%;">
			<agreement-scope @closewindow="handleScopeCloseWindow" :agreementType="formData.type" />
		</van-popup>
		<more-picker :popupVisible="popupVisible" ref="morePickerRef" :options="options" @selected="zdSelected" label="终端" placeholder="请选择终端" />
		<one-picker ref="onePickerRef" @oneChoiceComplete="oneChoiceComplete" :options="options" />
		<van-action-bar>
			<van-action-bar-icon icon="cart-o" text="待定" />
			<van-action-bar-button type="primary" text="下一步" to="/product" />
		</van-action-bar>
	</div>
</template>

<script setup lang="ts">
	import { iface_ssq } from '@/types/global';
	import AgreementScope from '@/components/AgreementScope.vue'
	import { formatDate } from '@/utils/commonTools'
	import { useAgreementStore } from '@/store'
	import { reactive, ref } from 'vue';
	const store = useAgreementStore();
	const formData = store.agreement;
	const dateShow = ref(false);
	const scopeShow = ref(false);
	const startDate = ref('');
	const endDate = ref('');
	const signTypes = ref(['电子签章', '纸件盖章']);
	const agreementTypes = ref(['省级代理', '城市代理', '区县代理', '终端代理']);
	const currentDateField = ref('');
	const currentJyField = ref('');
	const defaultDate = ref(new Date())
	const showDatepicker = (field : string) => {
		const now = new Date();
		if (field == 'startDate') {
			const nextMonth = now.getMonth() + 1; // 当前月的下一个月
			const year = now.getFullYear();
			const firstDayNextMonth = new Date(year, nextMonth, 1);
			defaultDate.value = firstDayNextMonth;
		} else {
			const year = now.getFullYear();
			const lastDayOfYear = new Date(year, 11, 31); // 11 是 12 月，0 基索引
			defaultDate.value = lastDayOfYear;
		}
		currentDateField.value = field;
		dateShow.value = true;
	}
	const onConfirm = (value : Date) => {
		formData[currentDateField.value] = value;
		if (currentDateField.value == 'startDate') {
			startDate.value = formatDate(formData.startDate);
		} else {
			endDate.value = formatDate(formData.endDate);
		}
		dateShow.value = false;
	}

	const options = ref([])

	const jfs = ref(['甲方1', '甲方2'])
	const yfs = ref(['乙方1', '乙方2'])

	const choice = (field : string) => {
		currentJyField.value = field;
		switch (field) {
			case 'jf':
				options.value = jfs.value
				break;
			case 'yf':
				options.value = yfs.value
				break;
			default:
				console.log('暂未支持')
		}
		if (onePickerRef.value) {
			onePickerRef.value.showPopup()
		}
	}

	const oneChoiceComplete = (val : string) => {
		formData[currentJyField.value] = val;
	}

	const zdSelected = (zds : []) => {
		formData.zds = zds;
		popupVisible.value = false;
	}
	
	const popupVisible = ref(false)

	const handleScopeCloseWindow = (scopes : string[]) => {
		for (let scope of scopes) {
			let array = scope.split("-");
			let area : iface_ssq = {
				province: '',
				city: '',
				area: ''
			};
			if (formData.type == '省级代理') {
				area.province = array[0];
			} else if (formData.type == '城市代理') {
				area.province = array[0];
				area.city = array[1];
			} else {
				area.province = array[0];
				area.city = array[1];
				area.area = array[2];
			}
			formData.areas.push(area);
		}
		scopeShow.value = false;
	}

	const zdList = reactive([{
		text: "测试医院1",
		value: "zd1",
		province: '四川省',
		city: '成都市',
		area: '青羊区',
		zdName: '测试医院1',
		level: 1,
		grade: 2
	},
	{
		text: "测试医院2",
		value: "zd2",
		province: '四川省',
		city: '成都市',
		area: '青羊区',
		zdName: '测试医院2',
		level: 1,
		grade: 2
	},
	{
		text: "测试医院3",
		value: "zd3",
		province: '四川省',
		city: '成都市',
		area: '青羊区',
		zdName: '测试医院3',
		level: 1,
		grade: 2
	},
	{
		text: "测试医院3",
		value: "zd3",
		province: '四川省',
		city: '成都市',
		area: '青羊区',
		zdName: '测试医院3',
		level: 1,
		grade: 2
	},
	{
		text: "测试医院3",
		value: "zd3",
		province: '四川省',
		city: '成都市',
		area: '青羊区',
		zdName: '测试医院3',
		level: 1,
		grade: 2
	},
	{
		text: "测试医院3",
		value: "zd3",
		province: '四川省',
		city: '成都市',
		area: '青羊区',
		zdName: '测试医院3',
		level: 1,
		grade: 2
	},
	{
		text: "测试医院3",
		value: "zd3",
		province: '四川省',
		city: '成都市',
		area: '青羊区',
		zdName: '测试医院3',
		level: 1,
		grade: 2
	},
	{
		text: "测试医院3",
		value: "zd3",
		province: '四川省',
		city: '成都市',
		area: '青羊区',
		zdName: '测试医院3',
		level: 1,
		grade: 2
	},
	{
		text: "测试医院3",
		value: "zd3",
		province: '四川省',
		city: '成都市',
		area: '青羊区',
		zdName: '测试医院3',
		level: 1,
		grade: 2
	}])

	const sybs = reactive([{ text: '事业部1', value: '001' }, { text: '事业部2', value: '002' }])

	const morePickerRef = ref(null);
	const onePickerRef = ref(null)
	const moreChoice = (field : string) => {
		console.log(field)
		switch (field) {
			case '终端':
				options.value = zdList;
				break;
			case '事业部':
				options.value = sybs
				break;
		}
		popupVisible.value = true;
		console.log(popupVisible.value)
	}
</script>

<style scoped>
	.app {
		padding-top: 0.625rem;
	}
</style>